<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="my-coupons-page min-h-screen bg-gray-50 pb-20">
    <!-- Header -->
    <view class="bg-gradient-to-r from-orange-600 to-orange-400 text-white p-4 sticky top-0 z-10">
      <view class="flex items-center">
        <view class="p-1 mr-2" @click="goBack">
          <ChevronLeft class="w-6 h-6" />
        </view>
        <view class="text-xl font-bold">我的优惠券</view>
      </view>
    </view>

    <!-- Tab Navigation -->
    <view class="bg-white sticky top-14 z-10 shadow-sm">
      <view class="flex border-b">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="flex-1 py-3 text-center text-sm font-medium relative"
          :class="activeTab === tab.value ? 'text-orange-500' : 'text-gray-600'"
          @click="changeTab(tab)"
        >
          {{ tab.label }}
          <view
            v-if="activeTab === tab.value"
            class="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500"
          ></view>
        </view>
      </view>
    </view>

    <!-- Coupon List -->
    <view class="p-4">
      <view v-if="couponList.length === 0" class="text-center py-12">
        <Ticket class="w-16 h-16 text-gray-300 mx-auto mb-4" />
        <view class="text-gray-500">暂无优惠券</view>
        <view class="mt-4 px-4 py-2 bg-orange-500 text-white rounded-full text-sm">
          去领取优惠券
        </view>
      </view>

      <view v-else class="space-y-4">
        <view
          v-for="(coupon, index) in couponList"
          :key="index"
          class="coupon-card relative overflow-hidden"
        >
          <!-- Coupon Container -->
          <view
            class="flex rounded-lg shadow-md overflow-hidden"
            :class="couponColors[index % couponColors.length]"
          >
            <!-- Left Part: Amount -->
            <view class="w-1/3 p-4 flex flex-col items-center justify-center text-white">
              <view class="flex items-baseline">
                <text class="text-sm">¥</text>
                <text class="text-3xl font-bold">{{ coupon.amount }}</text>
              </view>
              <view class="text-xs mt-1 text-white/80">满{{ coupon.minSpend }}元可用</view>
            </view>

            <!-- Divider with circles -->
            <view class="relative">
              <view class="absolute top-0 -left-2 w-4 h-4 rounded-full bg-gray-50"></view>
              <view class="absolute bottom-0 -left-2 w-4 h-4 rounded-full bg-gray-50"></view>
              <view class="h-full border-dashed border-l border-white/30"></view>
            </view>

            <!-- Right Part: Details -->
            <view class="flex-1 p-4 text-white">
              <view class="flex items-center">
                <img
                  :src="coupon.storeImage"
                  :alt="coupon.storeName"
                  class="w-10 h-10 rounded-full object-cover border-2 border-white/30"
                />
                <view class="ml-2">
                  <h3 class="font-bold">{{ coupon.storeName }}</h3>
                  <view class="text-xs text-white/80">{{ coupon.category }}</view>
                </view>
              </view>

              <view class="mt-3 text-xs text-white/80 flex items-center">
                <Clock class="w-3 h-3 mr-1" />
                <text>{{ coupon.validUntil }}</text>
              </view>

              <!-- Use Button -->
              <view
                v-if="activeTab === 0"
                class="mt-2 px-3 py-1 bg-white rounded-full text-xs font-medium"
                :class="couponTextColors[index % couponColors.length]"
              >
                立即使用
              </view>

              <!-- Used/Expired Stamp -->
              <view
                v-if="activeTab === 1"
                class="absolute top-1/2 right-4 transform -translate-y-1/2 -rotate-30 border-4 border-white/50 rounded-lg px-2 py-1"
              >
                <text class="text-white text-xl font-bold">已使用</text>
              </view>

              <view
                v-if="activeTab === 2"
                class="absolute top-1/2 right-4 transform -translate-y-1/2 -rotate-30 border-4 border-white/50 rounded-lg px-2 py-1"
              >
                <text class="text-white text-xl font-bold">已过期</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ChevronLeft, Clock, Ticket } from 'lucide-vue-next'
import { http } from '@/utils/http'

const tabs = [
  { label: '可使用', value: 1 },
  { label: '已使用', value: 2 },
  { label: '已过期', value: 3 },
]

const activeTab = ref(1)
const changeTab = (tab) => {
  activeTab.value = tab.value
  getData()
}

const couponColors = [
  'bg-gradient-to-r from-orange-600 to-orange-400', // Orange
  'bg-gradient-to-r from-blue-600 to-blue-400', // Blue
  'bg-gradient-to-r from-purple-600 to-purple-400', // Purple
  'bg-gradient-to-r from-green-600 to-green-400', // Green
  'bg-gradient-to-r from-red-600 to-red-400', // Red
  'bg-gradient-to-r from-teal-600 to-teal-400', // Teal
]

const couponTextColors = [
  'text-orange-500',
  'text-blue-500',
  'text-purple-500',
  'text-green-500',
  'text-red-500',
  'text-teal-500',
]

const couponList = ref([])

const getData = async () => {
  let res = await http.get('/api/userCoupon/list')
  if (res.code == 200) {
    console.log('res', res)
    couponList.value = res.data.list
  }
}

onLoad(() => {
  getData()
})

// Navigation
const goBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.coupon-card {
  transition: transform 0.2s;
}

.coupon-card:hover {
  transform: translateY(-2px);
}

.-rotate-30 {
  transform: rotate(-30deg);
}
</style>
